<template>
  <div class="echartBox">
    <div
      class="component"
      v-for="(component, index) in echartView"
      :key="component"
    >
      <component :is="component" :index="index"></component>
    </div>
    <!-- <component
      v-for="component in echartView"
      :key="component"
      :is="component"
      class="component"
    ></component> -->
    <!-- <img style="width: 100%" src="./img/header.png" alt="" /> -->
  </div>
</template>

<script setup>
const props = defineProps({
  echartView: {
    type: Array,
    default: () => []
  }
})
// const emit = defineEmits(['showDialog', 'update:echartView'])
function changeContent() {}
</script>

<style scoped lang="scss">
.echartBox {
  height: 137px;
  width: 100%;
  // padding: 0 10px;
  display: flex;
  .component {
    // flex: 1;
    width: 19%;
    margin: 0 0.8%;
    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
